import React from 'react'
import { totalConfig, propName } from 'config/templateConfig'
import { tipPop } from '../tipPop'

export default React.createClass({
    getInitialState() {
        return { npc: {}, tasks: null }
    },
    componentDidMount() {
        let self = this
        let npcId = this.props.opts.npcId
        let npcInfo = totalConfig.npc[npcId]

        this.setState({ npc: npcInfo, tasks: npcInfo.tasks })
    },
    openTipPop(taskId) {
        console.log(taskId)
        let self = this
        var taskInfo = totalConfig.task[taskId];
        tipPop.openPanel({
            title: taskInfo.name,
            message: taskInfo.desc,
            showConfirmButton: true,
            showCancelButton: true,
            confirmText: '接受任务',
            onConfirm: function () {
                self.receiveTask(taskId)
            }
        })
    },
    receiveTask(taskId) {
        player.task.receiveTask(taskId, player)
        tipPop.close()
    },
    render() {
        let self = this,
            taskNode = []
        if (this.state.tasks && this.state.tasks.length > 0) {
            this.state.tasks.forEach(function (item) {
                console.log(item)
                taskNode.push(
                    <div key={item}>
                        <button onClick={self.openTipPop.bind(self, item)}>{propName[item]}</button>
                    </div>
                )
            })
        }
        return <div id='npcPanel'>
            <div className='head'>
                <div className='title'>{this.state.npc.name}</div>
                <div className='desc'></div>
            </div>
            <div className='flex'>
                {taskNode}
            </div>
        </div>
    }
})
